<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>指标备选项管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="/static/favicon.ico">
    <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css?v=4.1.0" rel="stylesheet">

    <link rel="stylesheet" href="/static/plugins/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-validator/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/static/plugins/treegrid/jquery.treegrid.css">
    <!-- Latest compiled and minified CSS -->
    <style>
        /* ibox 背景 */
        .ibox-blue > .ibox-title {
            border-color: rgb(57, 174, 245);
        }
        .form-control:focus,
        .single-line:focus {
            border-color: #0e9aef !important;
        }
        .checkbox-inline {
            line-height: 5px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins ibox-blue">
        <div class="ibox-title">
            <h5>指标备选项管理</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">

            <div class="row row-lg">
                <div class="example" style="margin-top: -10px;">
                    <div class="btn-group hidden-xs" id="toolbar" role="group">
                        <button type="button" class="btn btn-outline btn-default" id="addButton">
                            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                            添加
                        </button>
                        <button type="button" class="btn btn-outline btn-default" id="updateButton">
                            <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
                            修改
                        </button>
                        <button type="button" class="btn btn-outline btn-default" id="deleteButton">
                            <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            删除
                        </button>
                    </div>

                    <table id="treeTable" data-mobile-responsive="true" data-click-to-select="true">
                        <thead>
                        <tr>
                            <th data-field="selectItem" data-checkbox="true"></th>
                        </tr>
                        </thead>
                    </table>

                </div>
            </div>

        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="addModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addForm" class="form-horizontal" autocomplete="off">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">添加指标备选项</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">备选项名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="name" maxlength="255" placeholder="请输入备选项名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">排序码</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="sort_code" placeholder="请输入排序码">
                            <span style="color: red;" >* 按顺序转换成选项</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">分值</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" name="score" placeholder="请输入分值">
                        </div>
                    </div>
                    <input type="hidden" name="normtarget_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">提交</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="updateModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="updateForm" class="form-horizontal" autocomplete="off">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">修改指标备选项</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">备选项名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="name" maxlength="255" placeholder="请输入备选项名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">排序码</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="sort_code" placeholder="请输入排序码">
                            <span style="color: red;" >* 按顺序转换成选项</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">分值</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" name="score" placeholder="请输入分值">
                        </div>
                    </div>
                    <input type="hidden" name="normtarget_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">提交</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="/static/js/content.js?v=1.0.0"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/plugins/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<script src="/static/plugins/bootstrap-validator/js/language/zh_CN.js"></script>
<!-- treegrid -->
<script src="/static/plugins/treegrid/jquery.treegrid.min.js"></script>
<script src="/static/plugins/treegrid/jquery.treegrid.bootstrap3.js"></script>
<script src="/static/plugins/treegrid/jquery.treegrid.extension.js"></script>
<script src="/static/plugins/treegrid/tree.table.js"></script>
<script>
    var Menu = {
        id: "treeTable",
        table: null,
        layerIndex: -1
    };

    var tableData = [];

    /**
     * 初始化表格的列
     */
    Menu.initColumn = function () {
        var columns = [
            {
                field: 'selectItem',
                radio: true
            },
            {
                field: 'id',
                title: 'ID',
                align: 'center',
                valign: 'middle',
                width: '60px'
            },
            {
                field: 'name',
                title: '名称',
                align: 'center',
                valign: 'middle'
            },
            {
                field: 'sort_code',
                title: '排序码/选项',
                align: 'center',
                valign: 'middle',
                formatter: function(item, index) {
                    tableData.push(item);
                    if (item.type == 1) {
                        return item.sort_code;
                    } else {
                        return item.sort_code;
                    }
                }
            },
            {
                field: 'type',
                title: '类型',
                align: 'center',
                valign: 'middle',
                formatter: function(item, index) {
                    if(item.type === 1){
                        return '<span class="label label-primary">指标</span> <input type="hidden" name="type" value="'+item.type+'">';
                    }
                    if(item.type === 2){
                        return '<span class="label label-success">指标备选项</span> <input type="hidden" name="type" value="'+item.type+'">';
                    }
                }
            },
            {
                field: 'score',
                title: '分值',
                align: 'center',
                valign: 'middle'
            }
        ];
        return columns;
    };

    $(function () {
        var colunms = Menu.initColumn();
        var table = new TreeTable(Menu.id, "/admin/normitem/getList", colunms);
        table.setExpandColumn(2);
        table.setIdField("id");
        table.setCodeField("id");
        table.setParentCodeField("pid");
        table.setExpandAll(false);
        table.init();
        Menu.table = table;
    });

    function getMenuId () {
        var selected = $('#treeTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            parent.layer.msg('请选择一条记录', {time: 1500, icon:5});
            return false;
        } else {
            return selected[0].id;
        }
    }

    //添加权限
/*    $('#addModal').on('show.bs.modal', function () {

        $("#addForm").data('bootstrapValidator').destroy();
        $('#addForm').data('bootstrapValidator', null);
        addValidator();
    });*/
    $("#addButton").click(function () {
        var id = getMenuId();
        var type = $("#treeTable").find("tr").find("input[name='select_item']:checked").parent().parent().find("input[name='type']").val();
        if (type == 2) {
            parent.layer.msg('请选择指标进行添加', {time: 1500, icon:5});
            return;
        }
        $("#addModal input[name='normtarget_id']").val(id);
        // 查找数据类型
        $("#addModal").modal("show");
    });
    addValidator();
    function addValidator() {
        $('#addForm').bootstrapValidator({
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '备选项名称不能为空'
                        }
                    }
                },
                sort_code: {
                    validators: {
                        notEmpty: {
                            message: '排序码不能为空'
                        }
                    }
                },
                score: {
                    validators: {
                        notEmpty: {
                            message: '分值不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();
            $.ajax({
                url: "/admin/normitem/addNormitem",
                data:  $("#addForm").serialize(),
                type: "POST",
                dataType: 'json',
                success: function(data){
                    $("#addModal").modal('hide');
                    if (data.success) {
                        $("#addModal").modal('hide');
                        $("#addForm")[0].reset();
                        Menu.table.refresh();
                        parent.layer.msg(data.msg, {icon: 1});
                    } else {
                        parent.layer.msg(data.msg, {time: 1500, icon:5});
                    }
                }
            });
        });
    }

    //修改权限
    $("#updateButton").click(function () {
        var id = getMenuId();
        if (id == false) {
            return false;
        }
        var list = [];
        $.ajax({
            async:false,
            url: "/admin/normitem/getNormitemById",
            data: {"id": id},
            type: "POST",
            dataType: 'json',
            success: function(data){
                list = data;
            }
        });
        for (var item in list) {
            $("#updateModal input[name='"+item+"']").val(list[item]);
        }
        $("#updateForm").data('bootstrapValidator').destroy();
        $('#updateForm').data('bootstrapValidator', null);
        updateValidator();
        $("#updateModal").modal("show");
    });
    updateValidator();
    function updateValidator() {
        $('#updateForm').bootstrapValidator({
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '备选项名称不能为空'
                        }
                    }
                },
                sort_code: {
                    validators: {
                        notEmpty: {
                            message: '排序码不能为空'
                        }
                    }
                },
                score: {
                    validators: {
                        notEmpty: {
                            message: '分值不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();
            $.ajax({
                url: "/admin/normitem/updateNormitem",
                data:  $("#updateForm").serialize(),
                type: "POST",
                dataType: 'json',
                success: function(data){
                    $("#updateModal").modal('hide');
                    if (data.success) {
                        $("#updateModal").modal('hide');
                        Menu.table.refresh();
                        parent.layer.msg(data.msg, {icon: 1});
                    } else {
                        parent.layer.msg(data.msg, {time: 1500, icon:5});
                    }
                }
            });
        });
    }

    $("#deleteButton").click(function () {
        var id = getMenuId();
        parent.layer.confirm('确定删除选中权限？', {
            btn: ['确定','取消'], //按钮
            shade: false //不显示遮罩
        }, function() {
            $.ajax({
                url: "/admin/normitem/delete",
                data:  {"id": id},
                type: "POST",
                dataType: 'json',
                success: function(data){
                    if (data.success) {
                        Menu.table.refresh();
                        parent.layer.msg(data.msg, {icon: 1});
                        Menu.table.refresh();
                    } else {
                        parent.layer.msg(data.msg, {time: 1500, icon:5});
                    }
                }
            });
        });
    });
</script>
</body>
</html>